<template>
    <div class="searchContainer">
        <!-- myheader -->
        <my-header title="搜索"></my-header>
        <!-- mysearch -->
        <my-search></my-search>
        <!-- wordsbox -->
        <div class="words-box">
            <div class="words-title">热门搜索</div>
            <div class="words-list">
                <span class="words" v-for="(item, index) in category.wordsList.data" :key="index">{{item.word}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader'
import mySearch from 'Components/common/mySearch'
import { mapState } from 'vuex'
export default {
    components: {
        mySearch,
        myHeader
    },
    computed: {
        ...mapState(['category'])
    }
}
</script>

<style lang="scss" scoped>
    .searchContainer {
        .words-box {
            padding: .16rem;
            .words-title {
                color: #999;
                font-size: .13rem;
                overflow: hidden;
            }
            .words {
                float: left;
                margin: .1rem 2% 0 0;
                display: block;
                padding: .05rem .1rem;
                border: 1px solid #ddd;
                border-radius: 4px;
                letter-spacing: 1px;
                color: #333;
                max-width: 30%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-size: 0.14rem;
            }
        }
    }
</style>
